.add-member-container {
  width: 100%;
  min-height: 100vh;
  background: #FFFFFF;
  overflow-x: hidden;
}

// 顶部导航区域背景
.header-wrapper {
  width: 750px;
  // height: 200px;
  background: #3F99F9;
  border-radius: 0px 0px 0px 0px;
  position: relative;
  margin: 0 auto;
}

// 顶部导航
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 40px 20px 20px;
  background: transparent;
  position: relative;

  .back-icon {
    width: 60px;
    height: 60px;
    font-size: 60px;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 324px;
    height: 54px;
    font-family: 'Source Han Sans CN', 'Source Han Sans CN';
    font-weight: 500;
    font-size: 36px;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-action {
    // width: 60px;
    // height: 60px;
    font-family: 'Source Han Sans CN';
    font-weight: 500;
    font-size: 30px;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    &:active {
      opacity: 0.7;
    }
  }
}

// 成员列表
.member-list {
  background: #fff;
  // margin-top: 20px;
  // border-radius: 20px 20px 0 0;
  overflow: hidden;
}

// 成员项
.member-item {
  display: flex;
  align-items: center;
  padding: 21px 30px 35px 40px;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;

  // &:active {
  //   background-color: #f5f5f5;
  // }

  // 使用伪元素创建缩短的border-bottom
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px; // 与member-avatar左边对齐
    right: 30px; // 与member-action右边对齐
    height: 1px;
    background-color: #f0f0f0;
  }

  .member-avatar {
    width: 76px;
    height: 76px;
    background: #CCECFF;
    border-radius: 20px;
    margin-right: 17px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
    }
  }

  .member-info {
    flex: 1;

    .member-name {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 32px;
      color: #333333;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;

      .manager-tag {
        display: inline-block;
        padding: 2px 8px;
        background: #E8F4FF;
        color: #2D67B0;
        font-size: 20px;
        border-radius: 4px;
        font-weight: 500;
      }
    }

    .member-position {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 22px;
      color: #999999;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding-bottom: 4px;
    }

    .member-phone {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 20px;
      color: #CCCCCC;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .member-action {
    .add-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      width: 123px;
      height: 60px;
      background: #2D67B0;
      border-radius: 10px 10px 10px 10px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #FFFFFF;
      text-align: center;
      font-style: normal;
      text-transform: none;

    }
  }
}

// 部门选择样式
.department-select {
  background: #fff;
}

// 部门列表
.department-list {
  background: #fff;
}

// 部门项
.department-item {
  display: flex;
  align-items: center;
  padding: 0 30px 32px 40px;
  cursor: pointer;
  transition: background-color 0.2s;

  &:first-child {
    padding-top: 22px;
  }

    &:active {
      background-color: #f5f5f5;
    }

  .department-icon {
    width: 76px;
    height: 76px;
    background: #CCECFF;
    border-radius: 20px 20px 20px 20px;
    margin-right: 17px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .department-info {
    flex: 1;

    .department-name {
      font-weight: 400;
      font-size: 32px;
      color: #333333;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .department-desc {
      font-family: 'Source Han Sans CN';
      font-size: 14px;
      color: #666;
      line-height: 20px;
    }
  }

  .arrow-icon {
    font-size: 38px;
    color: #999;
  }
}

// 加载状态样式
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  
  .van-loading {
    font-size: 28px;
    color: #666;
  }
}

// 空状态样式
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px);
  font-size: 28px;
  color: #666;
  
  .empty-image {
    width: 355px;
    height: 355px;
    object-fit: contain;
  }
}